<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

interface UserInfo {
  name: string
  follower: number
  follower_difference: number,
  face:string

}

const props = defineProps<{
  userInfo: UserInfo,
  type:boolean
}>()

const toInfo = (id: number) => {
  console.log(id)

  // 并且携带ID
  router.push({
    path: "/info",
    query: {
      id: id
    }
  })
}
</script>
<template>
    <div class="rank-item" @click="toInfo(1)">

        <img class="face" :src="userInfo.face"
            referrerPolicy="no-referrer" crossorigin="anonymous" alt="">
        <div class="text">
            <div class="top">
                {{props.userInfo.name}}
            </div>
            <div class="bottom">
                粉丝数：{{userInfo.follower}}万
            </div>
        </div>
        <div class="count" :class="[props.type ? 'red' : 'green']">
            <template v-if="type">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    aria-hidden="true" role="img" height="1em">
                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                        <path d="m3 17l6-6l4 4l8-8"></path>
                        <path d="M14 7h7v7"></path>
                    </g>
                </svg>
            </template>
            <template v-else="type">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    aria-hidden="true" role="img" height="1em">
                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                        <path d="m3 7l6 6l4-4l8 8"></path>
                        <path d="M21 10v7h-7"></path>
                    </g>
                </svg>
            </template>
            {{userInfo.follower_difference}}万
        </div>
    </div>
</template>
<style lang="less">
@import url(../../assets/css/base.less);

.rank-item {
    width: 9.4667rem;
    height: 2.1333rem;
    margin-top: .2667rem;
    margin-left: auto;
    margin-right: auto;
    background: @primary-color;
    display: flex;
    align-items: center;

    .face {
        display: block;
        width: 1.3333rem;
        height: 1.3333rem;
        border-radius: 50%;
        border: .0267rem solid @heading-color;
        margin-left: .5333rem;
    }

    .text {
        flex: 1;
        padding-left: .2667rem;
        .top {
            font-size: .4267rem;
            color: @text-color;
        }
        .bottom{
            margin-top: .2667rem;
            font-size: .3733rem;
            color: @text-color-secondary;
        }
    }

    .count {
        font-size: .4267rem;
        margin-right: .2667rem;

        &.red {
            color: rgb(244, 82, 82);
        }

        &.green {
            color: rgb(41, 179, 110);
        }
    }
}
</style>